<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${fns:getConfig('productName')} | 找回密码</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet"
          href="${ctxStatic}/adminlte/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctxStatic}/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet"
          href="${ctxStatic}/adminlte/plugins/iCheck/square/blue.css">
      <link rel="stylesheet"
          href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css">     
</head>
<body class="hold-transition login-page">

<!--[if lte IE 6]><br/>
<div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a>
    <h4>温馨提示：</h4>
    <p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的
        Chrome、Firefox、Safari 等。</p></div><![endif]-->


<div class="login-box" style="width:500px;margin-top:3%">
    <div class="login-logo">
        <a href="#"><b>${fns:getConfig('productName')}</b></a>
    </div>
    <div class="login-box-body">
        <p class="login-box-msg">找回密码</p>
        <form id="pwdForm"  role="form" >
         <div class="form-group">
            <label for="pop_username">用户名</label>
                <input name="pop_username" id="pop_username" class="form-control" placeholder="用户名">
           
            </div>
            <div class="form-group">
            <label for="pop_mobile">手机号</label>
             <div class="input-group">
                <input  name="pop_mobile" id="pop_mobile" class="form-control"
                       placeholder="手机号">
               	 <span class="input-group-btn">
			        <button type="button" id="sendVcode" class="btn btn-danger btn-flat">发送验证码</button>
			      </span>
            </div>
            </div>
            <div class="form-group">
             <label for="pop_phonevalidatecode">手机验证码</label>
                <input name="pop_phonevalidatecode" id="pop_phonevalidatecode" class="form-control" placeholder="手机验证码">
            </div>
            <div class="form-group">
            <label for="pop_password">新密码</label>
                <input type="password" name="pop_password" id="pop_password" class="form-control"
                       placeholder="密码">
            </div>

          
                <div class="form-group">
                    <label class="input-label mid" for="validatePwdCode">验证码</label>
                    <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
                </div>
         

            <div class="row">
               
                <div class="col-xs-6">
                    <button type="submit" id="sendModify" class="btn btn-primary btn-block btn-flat">修改</button>
                </div><!-- /.col -->
                <div class="col-xs-6">
                    <a href="${ctx }" class="btn btn-primary btn-block btn-flat">返回</a>
                </div><!-- /.col -->
            </div>
        </form>
    </div><!-- /.login-box-body -->
</div><!-- /.login-box -->

<script src="${ctxStatic}/adminlte/plugins/jQuery/jquery-1.10.2.min.js"></script>
<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.js"></script>
<script src="${ctxStatic}/adminlte/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctxStatic}/adminlte/plugins/iCheck/icheck.min.js"></script>
<script src="${ctxStatic}/layer/layer.js"></script>
<script src="${ctxStatic}/jquery-plugin/jquery.timer.js"></script>
<script>
	function setTimeCall(v){
		var count=$("#sendVcode").data("count");
		$("#sendVcode").text("请"+(count-v)+"秒后再次发送！");
		//$("#sendVcode").data("count",count-1);
		if(count-v==0){
			$("#sendVcode").data("count",60);
			$("#sendVcode").text($("#sendVcode").data("text"));
			$("body").stopTime('a');
			$("#sendVcode").removeAttr("disabled");
		}
	}
    $(function () {
    	$("#sendVcode").data("count",60);
    	$("#sendVcode").data("text",$("#sendVcode").text());
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
        $("#sendVcode").on("click",function(){
        	var checkMobile=sendvocdevalidator.element("#pop_mobile");
        	var checkUser=sendvocdevalidator.element("#pop_username");
        	if(checkMobile==false||checkUser==false)
        		return;
        	$("#sendVcode").attr("disabled",true);
        	$.ajax({
        		url:"${ctxModule}/sms/smssend",
        		type:'post',
        		//contentType: "application/x-www-form-urlencoded",
        		data:{pop_mobile:$("#pop_mobile").val(),pop_username:$("#pop_username").val()},
        		success:function(a,b,c){
        			if(a.success){
        				$("body").everyTime('1s','a',setTimeCall);
        			}
        			else{
        				layer.alert(a.data);
        				$("#sendVcode").removeAttr("disabled");
        			}
        			},
        		error:function(){
        			layer.alert("请求失败！");
        			$("#sendVcode").removeAttr("disabled");
        			}
        	})
        });
        $("#pwdForm")[0].reset();
       window.sendvocdevalidator=  $("#pwdForm").validate({
            rules: {
            	pop_username: {
                    required: true,
                    minlength: 2
                  },
                  pop_mobile: {
                      required: true,
                      mobile: true
                    },
                  pop_phonevalidatecode:{
                    	required:true
                    },
                  pop_password:{
                	  required:true,
                	  minlength:6,
                	  maxlength:20
                  },
                  validateCode: {required:true,remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
            	
            },
            messages: {
            	pop_username: {required: "请填写用户名."}, pop_mobile: {required: "请输入手机号.",mobile:"手机号格式错误"},
            	validateCode: {remote: "验证码不正确.", required: "请填写验证码."},
                pop_password:{required:"请输入新密码",minlength:"密码长度不能小于6位",maxlength:"密码长度不能大于20位"}
            },
           
            errorPlacement: function (error, element) {
            	if($(element).attr("id")=="pop_mobile"){
            		$(element).parent().after($(error));
            	}
            	else{
            		$(element).parent().append($(error));
            		//$(element).parent().addClass("has-error");
            	}
            },
            submitHandler:function(form){
            	 var param = $("#pwdForm").serialize(); 
            	 $.ajax({
             		url:"${ctxModule}/sms/modifyPwd",
             		type:'post',
             		//contentType: "application/x-www-form-urlencoded",
             		data:param,
             		success:function(a,b,c){
             			if(a.success){
             				layer.alert("密码修改成功！",{closeBtn:0},function(){
             					window.location.href="${ctx}";
             				});
             			}
             			else{
             				layer.alert(a.data);
             			}
             			},
             		error:function(){
             			layer.alert("服务异常！");
             			}
             	});
            }
        });
        
    });
</script>
</body>
</html>
